<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">第一章</el-menu-item>
    </el-menu>
    <div>
      <el-table :data="tableData" style="width: 100%" @cell-dblclick="handle" :row-class-name="tableRowClassName">
        <el-table-column type="index"  label="序号" width="50">

        </el-table-column>
        <el-table-column prop="jname" label="题目" >
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.jname }}</div>
            <div v-else>
              <el-input v-model="scope.row.jname"></el-input>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="isfree" label="是否免费" >
          <template slot-scope="scope1" >
            <div v-if="!scope1.row.isEdit">
            <span v-if="scope1.row.isfree==0"  style="color: green">免费</span>
            <span v-if="scope1.row.isfree==1"  style="color: red">收费</span>
            </div>
            <div v-else>
              <el-radio v-model="scope1.row.isfree" label="0">免费</el-radio>
              <el-radio v-model="scope1.row.isfree" label="1">收费</el-radio>
            </div>
          </template>

        </el-table-column>

        <el-table-column prop="vid" label="视频" >
              <!--<el-button plain>视频按钮</el-button>-->
          <template slot-scope="scope">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8899/course-person/lecturer/web/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <el-button size="small" type="primary" @click="getjid(scope.row.jid)">点击上传</el-button>
              <i class="el-icon-loading" style="margin-left: 20px;color: red;" v-if="scope.row.vid"></i>
            </el-upload>
          </template>

        </el-table-column>


        <el-table-column prop="isdownload" label="课件" >
              <el-button plain >课件按钮</el-button>
        </el-table-column>

        <el-table-column prop="caozuo" label="操作" >
          <template slot="header" slot-scope="scope">
            <el-button type="danger" icon="el-icon-circle-plus-outline" @click="handleAdd" circle></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleClick(scope.row)">{{
                scope.row.isEdit || scope.row.name === '' ? '完成' : '编辑'
              }}
            </el-button>
            <el-button
              type="text" @click.native.prevent="deleteRow(scope.$index, tableData)"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <button type="submit" class="finshButton" @click="handleBack">完成返回</button>
      </div>
    </div>

  </div>
</template>

<script>
  import qs from 'qs'
  import OSS from 'ali-oss';
export default {
  name: "ClassHour",
  data() {
    return {
      butstate:0,
      tableData: [
      //   {
      //   id: '1',
      //   name: 'asdasd',
      //   free: '1',
      //   shipin: '',
      //   kejian: '',
      //   status: '1',
      //   caozuo: ''
      // }
      ],
      activeIndex: '1',
      zid:'',
      sectionvedio:{
        vConnection:'',
        jid:''
      }
    }
  }, methods: {
    getjid(jid){
      //alert(jid);
      this.sectionvedio.jid=jid;
    },
    // 视频上传
    handleAvatarSuccess(res, file) {
     // alert(JSON.stringify(res));
      //alert(JSON.stringify(row))
      this.sectionvedio.vConnection = res.obj;
      if (this.sectionvedio.jid != '' ) {
        //那么我就根据信息到视频表里,在根据jid 去小节表里添加视频
        this.$axios.post("course-person/aaa/course-video/addcourse",qs.stringify(this.sectionvedio)).then(r=>{
          if (r.data.obj>0) {
            //视频添加成功！
          }else  {
            this.$message('添加视频失败!!');
          }

        });

      }
    },
    beforeAvatarUpload(file) {
      const isMP4 = file.type === 'video/mp4';
      const isLt1024M = file.size / 1024 / 1024 < 1024;

      if (!isMP4) {
        this.$message.error('上传视频只能是 MP4 格式!');
      }
      if (!isLt1024M) {
        this.$message.error('上传视频大小不能超过 1024MB!');
      }
      return isMP4 && isLt1024M;
    },




    handleClick(row) {
      // 动态设置数据并通过这个数据判断显示方式
      if (row.isEdit) {

        //alert(JSON.stringify(row));
        if (row.jid =='') {
          if (row.jname != '') {
                //进行添加操作
            //alert("进行添加操作");
            this.$axios.post("course-person/aaa/section/addsection/"+this.zid,qs.stringify(row)).then(r=>{
                //添加成功后 把这一行的jid赋值
              row.jid = r.data.obj;
              this.$delete(row, 'isEdit');
              this.querryallsection();
            });
          }else {
            this.$message('添加课时名不能为空！')
          }
        }else{
          if (row.jname != '') {
            //进行修改操作
            //alert("进行修改操作");
            this.$axios.post("course-person/aaa/section/updatesction",qs.stringify(row)).then(r=>{
                //如果修改成功返回一个大于0的值
              if (r.data.obj>0){
                this.$delete(row, 'isEdit');
                this.querryallsection();
              } else {
                this.$message('修改失败！！');
              }
            });
          }else {
            this.$message('修改课程名不能为空！！');
          }
        }

      } else {
        this.$set(row, 'isEdit', true);
      }
      console.log(row.id);
      console.log(this.tableData)
    },
    handle(row, column, cell, event) {
    },
    handleAdd() {
      // 动态设置数据并通过这个数据判断显示方式
      this.tableData.push({
        jid:'',
        jname:'',
        isfree:'',
        isEdit: true
      });
    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleBack(){
      this.$router.push({
        path:"/chapterManager"
      });
    },
    querryallsection(){
      //查询章对应的节
      this.$axios.post("course-person/aaa/section/findsection/"+this.zid).then(r=>{
          //alert(JSON.stringify(r.data.obj))
          this.tableData=r.data.obj;
      });
    }
  },
  mounted(){

     this.zid=this.$route.query.zid;
      this.querryallsection();
  }
}
</script>

<style scoped>
.finshButton {
  height: 40px;
  width: 600px;
  color: #F56C6C;
  background-color: #fef0f0;
  border-radius: 20px;
  border: #F56C6C solid 1px;
  margin-top: 10px;
}

.finshButton:hover {
  color: white;
  background-color: #F56C6C;
}
</style>
